<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="elec">C</div>
  <!-- 解决方案8，用空元素进行分隔 -->
  <div id="eleEmp"></div>
  <div id="elea">
    <div id="eleb">B</div>
  </div>
</body>
<style>
  /* 解决方案8，用空元素进行分隔 */
  /* 这个空元素由于没有任何内容，所以自己会和自己外边距塌陷，别人也会和自己的接触部分外边距塌陷 */
  #eleEmp {
    margin-top: 10px;
    margin-bottom: 10px;
  }


  #elec {
    height: 100px;
    width: 400px;
    background: red;
  }

  #elea {
    height:  100px;
    width: 400px;
    background: lightblue;
    /* 解决方案1，采用绝对定位 */
    /* 父元素相对Relative定位，子元素Absolute定位 */
    /* position: relative; */

    /* 解决方案2 —— 子元素设置为 行内块级元素 inline-block */
    /* margin-top: 10px; */

    /* 解决方案5 —— 为父元素设置 overflow: hidden */
    /* BFC 元素不会发生外边距塌陷 */
    /* overflow: hidden; */

    /* 解决方案6 —— 父元素设置内边距 */
    /* padding-top: 20px; */

    /* 解决方案7 —— 设置边框，防止塌陷 */
    /* border-top: 1px solid lightgreen; */
  }

  #eleb {
    height: 20px;
    width: 400px;
    background: lightgray;
    /* 解决方案1 —— 绝对定位 */
    /* position: absolute; */

    /* 解决方案2 —— 子元素设置为 行内块级元素 inline-block */
    /* 注意要为行内块级元素设置宽和高 */
    /* display: inline-block; */

    /* 解决方案3 —— 子元素设置为 relative 定位，然后用 top 进行偏移 */
    /* 此时 margin 已失效 */
    /* position: relative; */
    /* top: 20px; */

    /* 解决方案4 —— 子元素设置浮动 */
    /* float: left; */

    /* 解决方案6 —— 父元素设置内边距 */


    /* margin-top: 20px; */

  }
</style>
</html>